<template>
	<div class="my-items-list h100 flex-col p-10">
		<div class="m-b-10">
			<el-button type="primary" icon="CirclePlus" @click="insertFn()">新增站点</el-button>
		</div>
		<my-list-panel ref="refTable" :total="state.total" :loadFn="loadData">
			<div class="f1 h0 overflow-y-auto">
				<n-grid :x-gap="10" :y-gap="10" cols="2 s:2 m:3 l:4 xl:6 xxl:6" responsive="screen">
					<n-grid-item v-for="item in state.list" :key="item.id">
						<project-items-card
							:cardData="item"
							:detailFn="deleteFn"
							:updateFn="updateFn"
							:deleteFn="deleteFn"
							:getList="getList"
						/>
					</n-grid-item>
				</n-grid>
			</div>
		</my-list-panel>

		<!-- 新增站点 -->
		<el-dialog
			:title="dialogTitle"
			v-model="dialog.open"
			width="500px"
			append-to-body
			@closed="resetForm(refDialogForm)"
		>
			<my-form
				ref="refDialogForm"
				:model="dialog.form"
				label-width="80px"
				:disabled="['detail'].includes(dialog.name)"
				:formItem="[
					{ prop: 'title', label: '名称', required: true },
					{ prop: 'img', label: '图片文件', itemType: 'img', listType: 'picture-card', required: true },
					{ prop: 'remark', label: '备注', type: 'textarea' }
				]"
			>
				<!-- { itemType: 'img', prop: 'configName', label: '图片', listType: 'picture-card', limit: 1, required: true }, -->
			</my-form>
			<template #footer>
				<el-button @click.prevent="dialog.open = false">取 消</el-button>
				<el-button type="primary" @click.prevent="dialogSubmitFn()">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="/project">
import ProjectItemsCard from './ProjectItemsCard.vue';
import { addSite, removeSite, editSite, pageSite } from '@/api/website';

$store.user.pageHome = false;

let state = reactive({
		total: 0,
		list: []
	}),
	dialog = reactive({
		title: '站点',
		open: false,
		name: '',
		form: {
			id: '',
			img: []
		}
	});
watch(
	() => dialog.form.img,
	() => {
		if (['insert', 'update'].includes(dialog.name)) {
			// 站点图片数据处理;
			if (dialog.form.img.length > 0) {
				dialog.form.imgFileId = dialog.form.img.map((item) => item.id).join(',');
			}
		}
	},
	{ deep: true }
);

watch(
	() => state.list,
	(val) => {
		val.forEach((item) => {
			item.img = [
				{
					id: item.imgFileInfo?.id,
					downloadUrl: item.imgFileInfo?.storageUrl,
					fileName: item.imgFileInfo?.fileName.split('.')[0],
					fileSize: item.imgFileInfo?.fileSize,
					fileSuffix: item.imgFileInfo?.fileSuffix
				}
			];
		});
	}
);

/********************************************************** 项目列表 ***********************************************************/
const { getList, dialogTitle, loadData, refTable, refDialogForm, insertFn, deleteFn, updateFn, dialogSubmitFn } =
	pageMixin({
		api: { page: pageSite, remove: removeSite, add: addSite, edit: editSite },
		dialog,
		state
	});
</script>

<style lang="scss" scoped>
$contentHeight: 250px;
@include b('items-list') {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.list-content {
		position: relative;
		height: $contentHeight;
	}
	.list-pagination {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
	}
}
</style>
